import React, { Component, useRef } from "react";
import _ from 'lodash'
import { Form, DatePicker, Space, Button } from "antd";
import GoBack from "@/components/TheGoBack";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import { getDateTime3 } from '@/utils/getDate'
import { apiDynamicCommentsList, apiDynamicCommentsReplyList, apiDynamicCommentsDel } from '@/request/pet'

const { RangePicker } = DatePicker;

const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = value => {
    if (value.time && value.time.length) {
      value.startDate = getDateTime3(value.time[0]) + ' 00:00:00'
      value.endDate = getDateTime3(value.time[1]) + ' 23:59:59'
    }
    delete (value.time)
    getValue(value)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      time: []
    })
    getValue({})
  }
  return (
    <div style={{ marginTop: 20 }}>
      <Form layout="inline" ref={formRef} onFinish={onFinish}>
        <Form.Item label="评论时间" name='time'>
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">搜索</Button>
            <Button onClick={reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

class Comments extends Component {
  state = {
    columns: [
      {
        title: "用户昵称",
        dataIndex: "nickName",
        key: "nickName",
      },
      {
        title: "评论时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "评论内容",
        dataIndex: "commentsText",
        key: "commentsText",
        render: (text, render) => {
          return <div style={{ width: 200, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{render.commentsText}</div>
        }
      },
      {
        title: "操作",
        render: (text, render) => {
          return (
            <div>
              <TheButton onClick={() => this.openDialog(render.commentsId)}>查看详情</TheButton>
              <TheButton onClick={() => this.deleteConfirm(render.commentsId)}>删除</TheButton>
            </div>
          );
        },
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    visible: false,
    detailsColumns: [
      {
        title: "用户昵称",
        dataIndex: "nickName",
        key: "nickName",
        render: (text, render) => {
          return <div>{render.nickName}<span style={{ color: '#03BFC0' }}>回复</span>{render.reviewMenber}</div>
        }
      },
      {
        title: "评论时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "评论内容",
        dataIndex: "commentsText",
        key: "commentsText",
      },
    ],
    detailsPageData: {
      pageNo: 1,
      pageSize: 10
    },
    detailsTotal: 0,
    detailsData: [],
    searchValue: {},
    commentsParentId: ''

  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { dynamicId } = this.props.match.params
    const { pageData, searchValue } = this.state
    const res = await apiDynamicCommentsList({ dynamicId, ...pageData, ...searchValue })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  getDetailsData = async () => {
    const { dynamicId } = this.props.match.params
    const { commentsParentId, detailsPageData } = this.state
    let res = await apiDynamicCommentsReplyList({ dynamicId, commentsParentId, ...detailsPageData })
    if (res.data && res.code === 0) {
      this.setState({
        detailsData: res.data,
        detailsTotal: res.totalCount,
        detailsPageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        }
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  detailsPageChange = (pageNo, pageSize) => {
    this.setState({
      detailsPageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getDetailsData()
    })
  };
  openDialog = (commentsParentId) => {
    this.setState({ visible: true, commentsParentId }, () => {
      this.getDetailsData()
    });
  };
  handleCancel = () => {
    this.setState({ visible: false, commentsParentId: '' });
  };
  getValue = (value) => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => {
      this.getData()
    })
  }
  deleteConfirm = (commentsId) => {
    React.$confirm({
      title: '您确认删除此评论吗？',
      onOk: async () => {
        let res = await apiDynamicCommentsDel({ commentsId })
        if (res.code === 0) {
          React.$message({
            type: 'info',
            content: "删除成功"
          })
          this.getData()
        }
      }
    })
  }
  render() {
    const {
      columns,
      dataSource,
      pageData: { pageNo, pageSize },
      total,
      visible,
      detailsColumns,
      detailsData,
      detailsPageData,
      detailsTotal
    } = this.state;
    return (
      <div className="p-layout-box">
        <div>
          <GoBack history={this.props.history} title="查看评论" />
        </div>
        <div className="p-search-box">
          <SearchHeader getValue={this.getValue} />
        </div>
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} scroll={{ x: 'max-content', y: 440 }} />
          <ThePagination
            pageNo={pageNo}
            pageSize={pageSize}
            total={total}
            pageChange={this.pageChange}
          />
        </div>
        <TheDialog
          title={"评论详情"}
          footer={null}
          visible={visible}
          handleCancel={this.handleCancel}
        >
          <div style={{ height: 500, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <TheTable columns={detailsColumns} dataSource={detailsData} scroll={{ x: 'max-content', y: 400 }} />
            <ThePagination
              pageNo={detailsPageData.pageNo}
              pageSize={detailsPageData.pageSize}
              total={detailsTotal}
              pageChange={this.detailsPageChange}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "flex-end",
              marginTop: 20,
            }}
          >
            <Button onClick={this.handleCancel}>返回</Button>
          </div>
        </TheDialog>
      </div>
    );
  }
}

export default Comments;
